<template>
  <view class="coupon-list-page">
    <uni-page-header title="我的礼券" />
    <u-sticky bg-color="#fff" custom-nav-height="44px" :offset-top="statusBarHeight">
      <u-tabs
        :list="tabs"
        :active-style="{
          color: '#000',
          fontWeight: 'bolder',
          transform: 'scale(1.05)'
        }"
        :inactive-style="{
          color: '#838383',
          transform: 'scale(1)'
        }"
        line-height="4"
        line-color="#78FFE6"
        line-width="70"
        @change="onTabChange"
      />
    </u-sticky>
    <u-empty v-if="isEmpty" mode="coupon" icon-size="60" text="暂无优惠券" margin-top="30" />
    <scroll-view v-else scroll-y class="list-wrap" :style="{height: scrollViewHeight}" @scrolltolower="onLoadNextData">
      <view
        v-for="(item, index) in listData"
        :key="index"
        class="coupon-card"
        :class="{'coupon-card_disabled': status !== 1}"
      >
        <view class="left">
          <view>
            <text class="tag">&yen;</text>
            <text class="amount">{{ item.value }}</text>
          </view>
          <view class="tip">满 {{ item.threshold_amount }} 可用</view>
        </view>
        <view class="right">
          <view class="top">
            <view class="name-date">
              <view class="name">{{ item.title }}</view>
              <view class="date">{{ item.valid_start_time }} - {{ item.valid_end_time }}</view>
            </view>
            <view class="btn" @click="onAction(item)">{{ btnText }}</view>
          </view>
          <view class="remark-wrap">
            <div
              class="remark"
              :style="{
                height: isExpend ? 'auto' : '15px',
                overflow: isExpend ? 'auto' : 'hidden'
              }"
            >
              {{ item.description }}
            </div>
            <u-icon
              :name="isExpend ? 'arrow-up' : 'arrow-down'"
              color="rgba(0,0,0,0.5)"
              bold
              size="13"
              @click="isExpend = !isExpend"
            />
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex'
import {
  execFn
} from '../utils/evalFn.js'
import {
  wx_customer_coupons_yz
} from '../api/index.js'
export default {
  name: 'CouponList',
  data() {
    return {
      isExpend: false,
      // 0.全部1.生效=未使用and未过期2.已使用3.已过期=未使用and已过期4.已失效=已使用or已过期
      status: 1,
      pagination: {
        page_num: 1,
        page_size: 20,
        total: 0
      },
      isEmpty: false,
      listData: [],
      shadowStyle: {
        backgroundImage: 'none',
        paddingTop: '0',
        marginTop: '20rpx'
      },
      tabs: [{
        name: '可使用'
      },
      {
        name: '已使用'
      },
      {
        name: '已失效'
      }
      ]
    }
  },
  computed: {
    ...mapState(['statusBarHeight']),
    scrollViewHeight() {
      return `calc(100vh - ${this.statusBarHeight + 44 * 2}px)`
    },
    btnText() {
      const names = ['去使用', '已使用', '已失效']
      return names[this.status - 1]
    }
  },
  onLoad() {
    this.getListData()
  },
  methods: {
    onLoadNextData() {
      const {
        total
      } = this.pagination
      if (this.listData.length === total && total) {
        this.pagination.page_num = 1
        return
      }
      this.pagination.page_num++
      this.getListData()
    },

    async getListData() {
      uni.showLoading()
      try {
        const data = await wx_customer_coupons_yz({
          status: this.status,
          ...this.pagination
        })
        uni.hideLoading()
        const {
          total,
          coupon_datas
        } = data
        this.pagination.total = total
        this.isEmpty = total === 0
        const tabName = {
          1: `可使用(${total})`,
          2: `已使用(${total})`,
          3: `已失效(${total})`
        }
        this.tabs[this.status - 1].name = tabName[this.status]
        if (total === 0) return
        this.listData = this.listData.concat(coupon_datas.map(e => {
          const {
            value,
            threshold_amount,
            valid_start_time,
            valid_end_time
          } = e
          this.$set(e, 'value', value / 100)
          this.$set(e, 'threshold_amount', threshold_amount / 100)
          this.$set(e, 'valid_start_time', this.$utils.dateFormat(valid_start_time, 'YYYY.MM.DD'))
          this.$set(e, 'valid_end_time', this.$utils.dateFormat(valid_end_time, 'YYYY.MM.DD'))
          return e
        }))
      } catch (error) {
        uni.hideLoading()
      }
    },

    onTabChange(data) {
      this.status = data.index + 1
      this.pagination.page_num = 1
      this.listData = []
      this.getListData()
    },

    onAction(data) {
      const {
        appid,
        path
      } = data
      if (this.status === 1) {
        uni.navigateToMiniProgram({
          appId: appid,
          path: path
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
	.list-wrap {
		width: 90%;
		padding-bottom: 20rpx;
		margin: 20rpx auto 0;

		.coupon-card {
			min-height: 150rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			background-color: $theme-color;
			box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, 0.5);
			@include flex-column-center;
			-webkit-mask-image: radial-gradient(circle at 98px 6px, transparent 6px, red 6.5px);
			-webkit-mask-position: 0 -6px;

			.left {
				width: 30%;
				height: 100%;
				@include flex-center;
				flex-flow: column;

				.tag {
					font-size: 25rpx;
					font-weight: bolder;
				}

				.amount {
					font-size: 43rpx;
					font-weight: bolder;
				}

				.tip {
					font-size: 25rpx;
				}
			}

			.right {
				width: 70%;
				height: 100%;
				padding: 20rpx;
				@include flex-between;
				flex-flow: column;
				background-color: #FFF;
				border-left: 1px dashed #000;

				.top {
					width: 100%;
					@include flex-between;
					gap: 10rpx;

					.name-date {
						flex: 1;

						.name {
							font-size: 28rpx;
							font-weight: bolder;
							padding-bottom: 10rpx;
						}

						.date {
							color: #b1b1b1;
							font-size: 22rpx;
						}
					}

					.btn {
						width: 55px;
						padding: 5rpx 0;
						border-radius: 50rpx;
						color: #000;
						font-size: 25rpx;
						text-align: center;
						background-color: $theme-color;
					}
				}

				.remark-wrap {
					width: 100%;
					padding-top: 30rpx;
					display: flex;
					align-items: flex-start;

					.remark {
						width: 100%;
						overflow: hidden;
						// text-overflow: ellipsis;
						// white-space: nowrap;
						color: #b1b1b1;
						font-size: 25rpx;
						padding-right: 10rpx;
					}
				}
			}

			&_disabled {
				background-color: #ddd !important;

				.left {
					color: #6e6e6e;
				}

				.right {
					.top {
						.name-data {
							.name {
								color: #6e6e6e;
							}
						}

						.btn {
							color: #6e6e6e;
							border: 1Px solid #6e6e6e;
							background-color: #FFF;
						}
					}
				}
			}
		}
	}
</style>

<style lang="scss">
	.coupon-list-page {
		.u-tabs__wrapper__nav {
			width: max-content;
			margin: auto;

			&__item {
				padding: 0;
				width: 240rpx;
			}
		}
	}
</style>
